<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title%}仿掘金主页{% endblock %}</title>
    <link rel="icon" type="image/x-icon" href="{{url_for('static',filename='/need_image/logo_min.svg')}}"/>
    {% block head %}{% endblock %}
</head>

<body>
    <!-- 设置多div组件的原因是有些样式不需要重复设置，一个选择器可以为多个元素设置基本样式。 -->
    <div id="__layout">
        <div id="juejin">
            <div class="view-container">
                <div class="main-header-box">
                    <!-- header中有很多组件有样式变化 -->
                    <header class="main-header visible" style="transform: translateZ(0)">
                        <div class="container1">
                            <!-- 存放主页logo，注意，原掘金主页有响应窗口式的变化，即logo会随着主页缩小而变化 -->
                            <a href="/" class="logo">
                                <img src="{{ url_for('static',filename='need_image/juejin-logo.png')}}" class="logo_big"/>
                                <img src="{{ url_for('static',filename='need_image/logo_min.svg')}}" class="logo_min"/>
                            </a>
                            <nav role="navigation" class="main-nav">
                                <ul class="article_nav-list">
                                    <!--logo右边的第一个导航栏（下拉框）-->
                                    <li class="main-nav-list">
                                        <!--缩小窗口时调用的组件-->
                                        <div class="phone-show-menu isResourceVisible">
                                            <span>首页</span>
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="unfold16-icon" >
                                                <path d="M2.45025 4.82431C2.17422 4.49957 2.40501 4.00049 2.83122 4.00049H9.16878C9.59498 4.00049 9.82578 4.49957 9.54975 4.82431L6.38097 8.55229C6.1813 8.78719 5.8187 8.78719 5.61903 8.55229L2.45025 4.82431Z" ></path>
                                            </svg>
                                        </div>
                                        <!--窗口正常是调用的组件-->
                                        <ul class="phone-hide isResourceVisible">
                                            <li class="nav-item link-item route-active active"><a href="/"><span>首页</span></a></li>
                                            <li class="nav-item link-item activities"><a href="https://juejin.cn/pins"><span>沸点</span></a></li>
                                            <li class="nav-item link-item book"><a href="https://juejin.cn/courses"><span>课程</span></a></li>
                                            <li class="nav-item link-item"><a href="https://juejin.cn/lives"><span>直播</span></a></li>
                                            <li class="nav-item link-item"><a href="https://juejin.cn/events/all"><span>活动</span></a></li>
                                            <li class="nav-item link-item"><a href="https://detail.youzan.com/show/goods/newest?kdt_id=104340304" class="nav-item link-item no-border" target="_blank"><span>商城</span></a></li>
											<li class="nav-item link-item download-icon"><a href="https://juejin.cn/app?utm_source=jj_nav" target="_blank" class="download-app no-border"><span>APP</span></a></li>
											<li class="nav-item link-item extension-icon"><a href="https://juejin.cn/extension?utm_source=jj_nav" class="header-plug" target="_blank"><span>插件</span></a></li>
                                        </ul>
                                    </li>
                                    <ul class="right-side-nav">
                                        <li class="search-add">
                                            <ul class="search-add-ul">
                                                <li class="nav-item search">
                                                    <form role="search" class="search-form">
                                                        <input type="search" class="search-input" maxlength="32" placeholder="探索稀土掘金" >
                                                        <div class="search-icon-container" >
                                                            <img src="{{ url_for('static',filename='need_image/input.png')}}" class="search-img" />
                                                        </div>
                                                    </form>
                                                </li>
                                                <li class="nav-item add creator-item">
                                                    <div class="add-group">
														<button class="add-btn">
															创作者中心
														</button>
                                                        <div class="more">
                                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="unfold12-icon">
                                                                <path d="M2.45025 4.82383C2.17422 4.49908 2.40501 4 2.83122 4H9.16878C9.59499 4 9.82578 4.49908 9.54975 4.82382L6.38097 8.5518C6.1813 8.7867 5.8187
                                                                 8.7867 5.61903 8.5518L2.45025 4.82383Z" fill="white">
                                                                </path>
                                                            </svg>
                                                        </div>
														<ul class="head_more_list" style="display: none">
                                                            <li class="item">
                                                                <span class="icon write-article">写文章</span>
                                                            </li>
                                                            <li class="item">
                                                                <span class="icon issue-points">发沸点</span>
                                                            </li>
                                                            <li class="item">
                                                                <span class="icon create-jcode">写代码</span>
                                                            </li>
                                                            <li class="item">
                                                                <span class="icon drafts">草稿箱</span>
                                                            </li>
                                                        </ul>
													</div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="nav-item vip-entry">
                                            <div class="header-vip">
												<img src="{{ url_for('static',filename='need_image/vip.svg')}}" class="vip-img"/>
												<span class="vip-word">会员</span>
											</div>
                                        </li>
                                        <li class="nav-item notification">
                                            <a href="#" class="app-link notification-a">
												<img src="{{ url_for('static',filename='need_image/inform-logo-off.png')}}" class="header-massage"/>
											</a>
                                        </li>
                                        <li class="nav-item auth">
                                            <button class="login-button">登录</button>
                                        </li>
                                    </ul>
                                </ul>
                            </nav>
                        </div>
                    </header>
                </div>
                {% block body1 %}{% endblock %}
            </div>
            <div class="global-component-box">
                <div class="alert-list alert-list"></div>
                <div class="suspension-panel suspension-panel">
                    <button title="回到顶部" class="btn1 to-top-btn" style="display: none">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="return_up">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 1C2.33579 1 2 1.33579 2 1.75C2 2.16421 2.33579 2.5 2.75 2.5H13.25C13.6642 2.5 14 2.16421 14 1.75C14 1.33579 13.6642 1 13.25 1H2.75ZM7.24407 3.87287C7.64284 3.41241 8.35716 3.41241 8.75593 3.87287L13.0622 8.84535C13.6231 9.49299 13.163 10.5 12.3063 10.5H10V14C10 14.5523 9.55228 15 9 15H7C6.44772 15 6 14.5523 6 14V10.5H3.69371C2.83696 10.5 2.37691 9.49299 2.93778 8.84535L7.24407 3.87287Z" fill="#8A919F"></path>
                        </svg>
                    </button>
                    <button title="建议反馈" class="btn1 meiqia-btn" style="">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-feedback">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.8252 4.002C1.8252 2.80032 2.79935 1.82617 4.00102 1.82617H12.001C13.2027 1.82617 14.1768 2.80032 14.1768 4.002V9.71628C14.1768 10.918 13.2027 11.8921 12.001 11.8921H9.43308L6.92709 14.1281C6.4455 14.5578 5.68234 14.216 5.68234 13.5706V11.8921H4.00102C2.79934 11.8921 1.8252 10.918 1.8252 9.71628V4.002ZM11.2414 7.86753C11.3826 7.65526 11.3249 7.36878 11.1126 7.22764C10.9004 7.08651 10.6139 7.14417 10.4728 7.35643C9.94042 8.15705 9.03153 8.68309 7.99997 8.68309C6.96841 8.68309 6.05952 8.15705 5.52719 7.35643C5.38605 7.14417 5.09957 7.08651 4.88731 7.22764C4.67504 7.36878 4.61738 7.65526 4.75852 7.86753C5.45467 8.91452 6.64645 9.60617 7.99997 9.60617C9.35349 9.60617 10.5453 8.91452 11.2414 7.86753Z" fill="#1E80FF"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% block body2 %}{% endblock %}
</body>
</html>